<!-- 
开源工作台：
源码地址：https://github.com/openspug/index
创建者: openspug组织@https://github.com/openspug
创建时间：2019-05-26
联系邮箱：yupozhang@gmail.com
--> 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-color: #F7F7F7;
    }

    .container {
      background-color: #fff;

    }

    .container-header {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      height: 40px;
      padding-left: 10px;
      
    }

    .container-body {
      display: flex;
      border-top: 1px solid #dfdfdf;
      padding: 20px 10px 0 10px;
      /*justify-content: space-between;*/
      flex-direction: row;
      flex-wrap: wrap;
    }

    .container div {
      display: flex;
    }

    .item-block {
      border: 1px solid #dfdfdf;
      flex-direction: column;
      height: 160px;
      width: 24%;
      margin-bottom: 20px;
      margin-right: 10px;

    }
    a:link{                       /* 超链接正常状态下的样式 */
      color: #000000;              /* 黑色 */
      text-decoration:none;         /* 无下划线 */
    }
    a:visited{                      /* 访问过的超链接 */
      color:#000000;                /* 黑色 */
      text-decoration:none;         /* 无下划线 */
    }


    .item-top {
      height: 80px;
      padding: 20px;
    }

    .item-logo {
       width: 60px;
       height: 60px;
      margin-right: 20px;

    }
    .item-logo img {
        width: 100%;
        height: 100%;

    }

    .item-body {
      flex-direction: column;
    }

    .item-bottom {
      height: 40px;
      justify-content: space-around;
      align-items: center;
      color: #888888;
      background-color: #F7F7F7;
      font-size: 13px;
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      padding-bottom: 10px;
    }

    .notice {
      font-size: 12px;
      color: #888;
    }

    .divider {
      height: 20px;
      width: 1px;
      background-color: #dfdfdf;
    }
  </style>
</head>
<body style="padding: 10px">
<div class="container">
  <div class="container-header">内部系统导航</div>
  <div class="container-body">
    <div class="item-block">
      <a href="https://about.gitlab.com/" target="_blank" >
      <div class="item-top">
        <div class="item-logo"><img src="img/gitlab.png"></div>
        <div class="item-body">
          <span class="title">Gitlab系统</span>
          <span class="notice">Gitlab内部代码仓库</span>
        </div>
      </div>
    </a>
        <div class="item-bottom">
          <a href="https://docs.gitlab.com/ee/README.html" target="_blank">
          <div>帮助文档</div>
        </a>
        </div>
    </div>
    <div class="item-block">
      <a href="https://www.atlassian.com/" target="_blank" >
      <div class="item-top">
        <div class="item-logo"><img src="img/wiki.png"></div>
        <div class="item-body">
          <span class="title">WIKI系统</span>
          <span class="notice">文档系统</span>
        </div>
      </div>
    </a>
      <div class="item-bottom">
        <div>帮助文档</div>
      </div>
    </div>

    <div class="item-block">
       <a href="https://www.zentao.net/" target="_blank" >
      <div class="item-top" >
        <div class="item-logo"><img src="img/chandao.png"></div>
        <div class="item-body">
          <span class="title">禅道系统</span>
          <span class="notice">项目管理系统</span>
        </div>
      </div>
    </a>
      <div class="item-bottom">
        <div>帮助文档</div>
      </a>
      </div>
    </div>

    <div class="item-block">
      <a href="https://www.openldap.org/" target="_blank" >
      <div class="item-top">
        <div class="item-logo"><img src="img/ldap.svg"></div>
        <div class="item-body">
          <span class="title">账户系统</span>
          <span class="notice">LDAP账号统一管理系统</span>
        </div>
      </div>
    </a>
      <div class="item-bottom">
        <div>帮助文档</div>
      </div>
    </div>
  </div>
</div>


<div class="container">
  <div class="container-header">运维导航</div>
  <div class="container-body">

    <div class="item-block">
      <a href="https://spug.qbangmang.com/login" target="_blank" >
      <div class="item-top" >
        <div class="item-logo"><img src="img/spug.png"></div>
        <div class="item-body">
          <span class="title">开源运维平台</span>
          <span class="notice">Spug开源运维平台</span>
        </div>
      </div>
    </a>
      <div class="item-bottom">
        <a href="https://github.com/openspug/spug" target="_blank">
        <div>源码地址</div>
      </a>
      </div>
    </div>

      <div class="item-block">
      <a href="https://github.com/openspug/spug" target="_blank" >
      <div class="item-top" >
        <div class="item-logo"><img src="img/github.png"></div>
        <div class="item-body">
          <span class="title">开源运维平台</span>
          <span class="notice">Spug运维平台源码</span>
        </div>
      </div>
    </a>
      <div class="item-bottom">
        <a href="https://spug.qbangmang.com/login" target="_blank">
        <div>演示地址</div>
      </a>
      </div>
    </div>


    <div class="item-block">
      <a href="https://grafana.com/" target="_blank">
      <div class="item-top">
        <div class="item-logo"><img src="img/grafana.png"></div>
        <div class="item-body">
          <span class="title">监控系统</span>
          <span class="notice">Grafana 监控平台</span>
        </div>
      </div>
    </a>
        <div class="item-bottom">
          <div>帮助文档</div>
        </div>
    </div>

    <div class="item-block">
      <a href="https://www.zabbix.com/" target="_blank">
      <div class="item-top">
        <div class="item-logo"><img src="img/zabbix.png"></div>
        <div class="item-body">
          <span class="title">监控报警</span>
          <span class="notice">Zabbix监控报警平台</span>
        </div>
      </div>
    </a>
      <div class="item-bottom">
        <div>帮助文档</div>
      </div>
    </div>

    <div class="item-block">
      <a href="https://jenkins.io/" target="_blank">
      <div class="item-top" >
        <div class="item-logo"><img src="img/jenkins.png"></div>
        <div class="item-body">
          <span class="title">发布系统</span>
          <span class="notice">Jenkins发布系统</span>
        </div>
      </div>
    </a>
      <div class="item-bottom">
        <div>帮助文档</div>
      </div>
    </div>

    <div class="item-block">
      <a href="http://www.jumpserver.org/" target="_blank">
      <div class="item-top" >
        <div class="item-logo"><img src="img/jumpserver.png"></div>
        <div class="item-body">
          <span class="title">跳板机系统</span>
          <span class="notice">Jumpserver 跳板机系统</span>
        </div>
      </div>
    </a>
      <div class="item-bottom">
        <div>帮助文档</div>
      </div>
    </div>

    <div class="item-block">
      <a href="http://yearning.io/" target="_blank">
      <div class="item-top" >
        <div class="item-logo"><img src="img/sql2.png"></div>
        <div class="item-body">
          <span class="title">数据库系统</span>
          <span class="notice">数据库审核平台</span>
        </div>
      </div>
    </a>
      <div class="item-bottom">
        <div>帮助文档</div>
      </div>
    </div>

<!--     <div class="item-block">
      <div class="item-top">
        <div class="item-logo"><img src="img/sky.png"></div>
        <div class="item-body">
          <span class="title">链路系统</span>
          <span class="notice">Skywalking链路追踪系统</span>
        </div>
      </div>

      <div class="item-bottom">
        <div onclick="window.open('http://xxx/')">测试环境</div>
        <div class="divider"></div>
        <div onclick="window.open('http://xxx/')">正式环境</div>
        <div class="divider"></div>
        <div>帮助文档</div>
      </div>
    </div> -->

  </div>
</div>
</body>
</html>